<template>
	<view @click="chang_focus(true)" :style="{'height':size}" class="verify-box pr">
		<view @click="chang_focus(true)" class="verify-item" :style="{'width':size,'height':size}" v-for="(item,index) in length" :key="index">
			{{get_number(index)}}
		</view>
		<input @input="change_input" @keyboardheightchange="keyboardheightchange" @blur="chang_focus(false)"  :maxlength="length" :focus="input_focus" class="hidden-input" type="number" v-model="input_text" />
	</view>
</template>

<script>
	export default {
		name: 'verify-code',
		data() {
			return {
				input_text: '',
				input_focus: false,
				number_arr:[],
			}
		},
		props: {
			length: {
				type: Number,
				default: 4
			},
			size: {
				type: String,
				default: '88rpx'
			}
		},
		methods: {
			get_number(index) {
				if (this.input_text.length >= (index + 1)) {
					return this.input_text.substring(index, 1+index);
				}
				return '';
			},
			chang_focus(status) {
				this.input_focus = status;
			},
			keyboardheightchange(e){
				if(e.detail.height == 0){
					this.chang_focus(false);
				}
			},
			change_input(){
				setTimeout(()=>{
					this.$emit('change',String(this.input_text).substring(0,6));
				},200)
			},
		}
	}
</script>

<style lang="scss">
	.verify-box {
		display: flex;
		justify-content: space-between;
		overflow: hidden;
	}

	.verify-item {
		border-radius: 10rpx;
		background-color: #F6F6F6;
		display: flex;
		justify-content: center;
		align-items: center;
		// border: 1rpx solid $color;
		font-size: 40rpx;
	}

	.hidden-input {
		position: absolute;
		// top: -100rpx;
		left: -700rpx;
		opacity: 0;
		background-color: red;
		width: 200%;
		top:0;
		height: 80rpx;
		text-align: left;
	}
</style>
